<template>
  <div class="x-cagetory">
    <div :id="id" class="cagetory-ctx"></div>
  </div>
</template>
<script>
export default {
  name: "xcagetory",
  props:{
    id:{
      type:String,
      default:""
    },
    name:{
      type:String,
      default:""
    },
    desc:{
      type:String,
      default:""
    },
    xData:{
        type:Array,
        default:()=>{
            return []
        }
    },

    data:{
      type:Array,
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      option: {
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            color:['#68E0CF','#209CFF'],
            legend: {
                width:10,
                height:8,
                top:10,
                right: 40,
                icon:"rect",
                orient:"vertical",
                itemWidth: 10,  // 设置宽度
            
            　　itemHeight: 8, // 设置高度
            
            　　itemGap: 10, // 设置间距
                textStyle:{
                    color:'#fff',
                    fontSize:14
                },
                data: ['新增人口', '撤离人口']
            },
            grid: {
                width:"95%",
                height:"90%",
                left: '0',
                right: '0',
                bottom: '0',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
                    axisTick: {
                        show: false
                    },
                    axisLabel:{
                      interval:0,
                      fontSize:10
                    },
                    axisLine:{
                      lineStyle:{
                        color:"#fff"
                      }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine:{
                      lineStyle:{
                        color:"#fff"
                      }
                    },
                    splitLine: {
                        show: false 
                    }
                }
            ],
            series: [
                {
                    name: '自住',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    smooth: true,
                    data: []
                },
                {
                    name: '出租',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    smooth: true,
                    data: []
                }
            ]
      }
    };
  },
  
  mounted() {
    this.drawPie();
  },
  methods: {
    drawPie() {
      let echarts = this.$echarts.init(document.getElementById(this.id));
      let seriesOne = [],seriesTwo=[]
      let tmp = this.data.map(el=>{
        return el.itmes
      })
      tmp.forEach(el=>{
        if(el[0].name=='搬离人口'){
          seriesOne.push(el[0].value)
          seriesTwo.push(el[1].value)
        }else{
          seriesOne.push(el[1].value)
          seriesTwo.push(el[0].value)
        }
      })
      this.option.series[0].data = seriesOne
      this.option.series[1].data = seriesTwo
      echarts.setOption(this.option);
    }
  }
};
</script>
<style lang="less" scoped>
.x-cagetory {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .cagetory-ctx {
    width: 100%;
    height: 100%;
  }
}
</style>